<template>
    <div>
        <p v-if="Object.keys(mediaObj).length === 0">
            <a-button @click="showSelector=true">
                <a-icon type="calendar"/>
                在素材库内选择视频
            </a-button>
        </p>
        <!--预览素材 -->
        <a-card v-else :hoverable="true">
            <video slot="cover" :src="mediaObj.mediaUrl" controls="controls" width="100%" height="200px"
                   autoplay="autoplay">您的浏览器不支持 video 标签。
            </video>
            <p>
                <a-input placeholder="视频标题" v-model.lazy="mediaObj.mediaName"/>
            </p>
            <p>
                <a-textarea placeholder="视频简介" v-model.lazy="mediaObj.mediaDescription"/>
            </p>
            <p class="text-right">
                <a-button shape="circle" icon="delete" size="small"
                          @click="onRemove"
                />
            </p>
        </a-card>
        <VideoSelector v-if="showSelector" @closeModal="closeModal"/>
    </div>
</template>
<script>
    export default {
        props: ['dataSource'],
        components: {VideoSelector: () => import('../../component/material/VideoSelector')},
        data() {
            return {
                mediaType: 'video',
                showSelector: false,
                mediaObj: {},
            }
        },
        methods: {
            closeModal(e) {
                this.showSelectorfalse;
                if (e.render) {
                    this.mediaObj = e.data;
                    //更新父组件
                    this.$emit('callBack', this.mediaObj);
                }
            },
            onRemove() {
                this.mediaObj = {};
            },

        },
        created() {
            this.mediaObj = this.dataSource;
        },
        watch: {
            mediaObj: {
                handler: function (val, oldval) {
                    this.$emit('callBack', this.mediaObj);
                },
                deep: true,
                immediate: true
            },
        }
    }
</script>
<style scoped>
</style>
